<template>
	<view v-if="InstallationData!=''">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="flex" style="margin-right: 25rpx">
					<view class="attention" v-if="concern==0" style="margin-left:50rpx;z-index: 9999;"
						@click="getConcern">
						关注</view>
					<view @click="sheet" v-if="concern==1" class="attention"
						style="z-index: 9999;margin-left:50rpx;color: #1E1E1EFF;background-color: #ECECECFF;">已关注
					</view>
				</view>
			</block>
		</hx-navbar>
		<view style="background-color: #ffffff;padding:20rpx 30rpx;">
			<view class="flex align-center">
				<view style="position: relative;">
					<image :src="InstallationData.image" mode="aspectFit" style="width: 184rpx;height:228rpx;"></image>
					<text class="statu" v-if="InstallationData.status == 0">空闲</text>
					<text class="statu" v-show>进行中</text>
				</view>
				<view style="margin-left:30rpx;">
					<view class="flex justify-between align-center">
						<view>
							<view class="flex align-center">
								<view style="color:#1E1E1E;font-size: 32rpx;font-weight: 600;">{{InstallationData.name}}
								</view>
								<!-- <view class="employment">{{InstallationData.information}}</view> -->
							</view>
							<view style="color: rgba(30,30,30,0.3);font-size: 24rpx">平台评分<text
									style="color: #F84949;font-size: 44rpx;margin-left: 5rpx;">9.9</text></view>
							<view class="flex align-center" style="margin-top: 20rpx;">
								<image src="../../static/install/8300.png" mode="aspectFit"
									style="width:32rpx;height: 32rpx;">
								</image>
								<view class="medal">{{InstallationData.label}}</view>
							</view>
						</view>
						<view class="flex align-center contact" style="padding:5rpx;width: 182rpx;" @tap="relation()">
							<image src="../../static/install/comment-dots@2x.png" mode="aspectFit"
								style="width:64rpx;height: 64rpx;"></image>
							<view style="font-size: 24rpx;color: #FFFFFF;">联系师傅</view>
						</view>
					</view>
					<view style="color: rgba(30,30,30,0.3);font-size: 24rpx;margin-top: 30rpx;">
						{{InstallationData.signature}}
					</view>
				</view>
			</view>
			<view style="margin-top: 40rpx;">
				<view style="color: #1E1E1E;font-size: 32rpx;">工作状态</view>
				<view class="status flex align-center justify-between" style="padding: 24rpx 20rpx;">
					<view class="flex align-center">
						<image src="../../../static/me/img.png" mode="aspectFit"
							style="width: 92rpx;height: 92rpx;border-radius: 15rpx;"></image>
						<view style="margin-left: 20rpx;">
							<view style="color: #1E1E1E;font-size: 28rpx;">华云丽江一期</view>
							<view style="font-size: 24rpx;color: rgba(30,30,30,0.3);">62m² &nbsp;欧式</view>
						</view>
					</view>
					<view class="flex align-center">
						<image src="/clientEnd/static/install/8005.png" mode="aspectFit"
							style="width: 64rpx;height:64rpx;"></image>
						<view style="color: #1E1E1E;font-size: 28rpx;">施工中...</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="background-color: #ffffff;padding:0 30rpx ;margin-top: 30rpx;overflow: hidden;">
			<view class="justify-between flex align-center">
				<view style="color: #000000;color: 36rpx;font-weight:650;">项目笔记</view>
				<view class="flex align-center" @click="notes()">
					<view style="color: #1E1E1E;font-size: 28rpx;">共13篇项目笔记</view>
					<image src="/clientEnd/static/topic/7814.png" mode="aspectFit"
						style="width:64rpx;height:64rpx;margin-left: 5rpx;"></image>
				</view>
			</view>
			<view v-for="(item,index) in notesList" :key="index" style="padding:0 30rpx;">
				<view style="color: #000000;font-size: 36rpx;font-weight:650;">{{item.title}}</view>
				<view class="title"
					style="background-color: rgba(30,30,30,0.05);border-radius: 22rpx;padding: 5rpx 15rpx;width: 140rpx;margin: 10rpx 0;">
					实地勘查
				</view>
				<view style="font-size: 28rpx;color: #000000;">不同的角色承担者完全不同的工作内容，原来单一的工作变的烦杂而凌乱，但你又必须去理顺。</view>
				<view style="margin: 30rpx 0;">
					<u-album :urls="item.image" keyName="src2" space="5"></u-album>
				</view>
			</view>
		</view> -->
		<!-- 弹窗 -->
		<uni-popup id="popup" ref="sheet" type="bottom" :animation="true">
			<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="cancelConcern">
				取消关注
			</view>
		</uni-popup>
		<Maluation :name="name"></Maluation>
	</view>
</template>

<script>
	import Maluation from "@/components/Maluation.vue"
	export default {
		components: {
			Maluation
		},
		data() {
			return {
				// 标题栏配置
				config: {
					title: "",
					back: true,
					color: "#111111",
					rightSlot: true,
					backgroundColor: [1, "#FFFFFF"],
				},
				notesList: [],
				InstallationData: [],
				name: {
					id: '',
					userId: null,
				},
				id: '',
				concern: '',
				token: '',
				userType: ''
			}
		},
		onLoad(e) {
			this.token = this.$cache.get('token')
			this.name.userId = this.$cache.get('id')
			this.id = e.id
			this.name.id = e.id
		},
		created() {
			this.getInstallationList(1, 10)
		},
		methods: {
			notes() {
				this.$tools.goPageNoAuth('../design/notes?id=' + this.id)
			},
			// 关注
			getConcern() {
				let data = {
					focusedId: this.id,
					userType: this.userType,
					operation: 1
				}
				this.$api.addConcern(data).then((res) => {
					console.log('关注', res)
					this.getInstallationList(1, 10)
				})
			},
			sheet() {
				this.$refs.sheet.open()
			},
			// 取消关注
			cancelConcern() {
				let data = {
					focusedId: this.id,
					userType: this.userType,
					operation: 0
				}
				this.$api.unConcern(data).then((res) => {
					console.log('取消关注', res)
					this.$refs.sheet.close()
					this.getInstallationList(1, 10)
				})
			},
			// 安装师傅详情
			getInstallationList(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
					id: this.id
				}
				if (this.token == null) {
					this.$api.unInstallationDetails(data).then((res) => {
						res.data.result.projectList.forEach((item) => {
							item.image = [item.image]
						})
						// 详情
						this.notesList = res.data.result.projectList;
						// 项目笔记列表
						this.InstallationData = res.data.result.installerInfo;
						this.concern = res.data.result.follow
						this.userType = res.data.result.type
						console.log('送人头的亚轩', res)
					})
				} else {
					this.$api.installationDetails(data).then((res) => {
						// console.log(res, '小程序')
						res.data.result.projectList.forEach((item) => {
							item.image = [item.image]
						})
						// 详情
						this.notesList = res.data.result.projectList;
						// 项目笔记列表
						this.InstallationData = res.data.result.installerInfo;
						this.concern = res.data.result.follow
						this.userType = res.data.result.type
						console.log('送人头的亚轩', res)
					})
				}

			},
			relation() {
				//sendId:发送人的ID
				console.log(this.InstallationData, '依那我就打我')
				//this.InstallationData.id:接收人的ID
				//this.InstallationData.name:接收人的名字
				uni.navigateTo({
					url: '../../../pages/information/User-Chat?id=' + this.InstallationData.id + '&title=' + this
						.InstallationData.name + '&type=' + 3 + '&myName=' + this.$cache.get('name') +
						'&myIcon=' + this.$cache.get('avatar') + '&avatar=' + this.InstallationData.image +
						'&sendId=' + this.InstallationData.id
				})
			},
		}
	}
</script>

<style scoped>
	.attention {
		color: #FFFFFF;
		color: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		background: #492D22;
	}

	.statu {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		background: #F0F3FA;
		color: #fff;
		text-align: center;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		padding: 0 5rpx;
	}

	.medal {
		width: 102rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: rgba(255, 128, 31, 0.19);
		border-radius: 4rpx;
		color: #F84949;
		text-align: center;
		font-size: 20rpx;
		margin-left: 15rpx;
		opacity: 1;
	}

	.employment {
		width: 104rpx;
		height: 32rpx;
		border-radius: 6rpx;
		opacity: 1;
		border: 2rpx solid #FF801F;
		color: #FF801F;
		text-align: center;
		font-size: 20rpx;
		line-height: 32rpx;
		margin-left: 10rpx;
	}

	.contact {
		text-align: center;
		width: 270rpx;
		height: 72rpx;
		background: #492D22;
		border-radius: 8rpx;
		margin-left: 40rpx;
	}

	.status {
		width: 546rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid rgba(30, 30, 30, 0.1);
		margin-top: 20rpx;
	}
</style>
